<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理</title>

    <link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/plugins/zTree/metroStyle.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg sdp-head">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li>位置: 系统管理</li>
            <li>菜单管理</li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>菜单树</h5>
                    <div class="ibox-tools">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">新增菜单</a></li>
                        </ul>
                    </div>
                </div>
                <div class="ibox-content" style="min-height:360px;overflow:auto;">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>菜单详情</h5>
                </div>
                <div class="ibox-content">
                    <div class="row sdp-row">
                        <div class="col-sm-2 sdp-col-title">菜单名称</div>
                        <div class="col-sm-4 sdp-col-content">系统管理</div>
                        <div class="col-sm-2 sdp-col-title">菜单类型</div>
                        <div class="col-sm-4 sdp-col-content">菜单</div>
                    </div>
                    <div class="row sdp-row">
                        <div class="col-sm-2 sdp-col-title">菜单类别</div>
                        <div class="col-sm-4 sdp-col-content">后台管理</div>
                        <div class="col-sm-2 sdp-col-title">是否可见</div>
                        <div class="col-sm-4 sdp-col-content">是</div>
                    </div>
                    <div class="row sdp-row">
                        <div class="col-sm-2 sdp-col-title">链接地址</div>
                        <div class="col-sm-10 sdp-col-content">http://localhost:8080/test</div>
                    </div>
                    <div class="row sdp-row">
                        <div class="col-sm-2 sdp-col-title">创建时间</div>
                        <div class="col-sm-4 sdp-col-content">2016-10-19 12:22:22</div>
                        <div class="col-sm-2 sdp-col-title">更新时间</div>
                        <div class="col-sm-4 sdp-col-content">2016-10-19 12:22:22</div>
                    </div>
                    <div class="sdp-tool" style="margin-top: 10px;">
                        <div class="sdp-left">
                            <a class="btn btn-xs btn-primary" type="button">编 辑</a>
                            <a class="btn btn-xs btn-primary" type="button">新增子菜单</a>
                            <a class="btn btn-xs btn-white" type="button">返 回</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>子菜单列表</h5>
                </div>
                <div class="ibox-content">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>菜单标题</th>
                            <th>菜单类型</th>
                            <th>菜单链接/编码</th>
                            <th>是否可见</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>操作员管理</td>
                            <td>菜单</td>
                            <td>http://localhost:8080/test</td>
                            <td>是</td>
                            <td>1</td>
                            <td>
                                <a href="#" class="btn btn-xs btn-outline btn-default">查看</a>
                                <a href="#" class="btn btn-xs btn-outline btn-default">编辑</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="sdp-tool">
                        <div class="sdp-left"></div>
                        <div class="sdp-right">
                            <div class="sdp-page-before">
                                共<span class="page-val">3</span>页<span class="page-val">60</span>条数据
                            </div>
                            <ul class="pagination sdp-pagination">
                                <li class="disabled"><a href="#">&laquo;</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/zTree/jquery.ztree.all.min.js"></script>
<script language="JavaScript">
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        view:{
            showIcon:false
        }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
        {
            name:"工作台"
        },
        {
            name:"系统管理",
            children:[
                {name:"操作员管理"}, {name:"角色管理"}, {name:"菜单管理"}, {name:"组织管理"}, {name:"基础数据管理"}, {name:"应用接入管理"}
            ]
        },
        {
            name:"用户管理"
        },
        {
            name:"业务平台管理"
        },
        {
            name:"合作伙伴",
            children:[
                {name:"合作伙伴信息"}, {name:"合作伙伴账号"}, {name:"合作伙伴审核"}, {name:"考核评级"}
            ]
        },
        {
            name:"结算管理",
            children:[
                {name:"分摊比例管理"}, {name:"结算规则配置"}, {name:"结算单管理"}
            ]
        },
        {
            name:"产品中心",
            children:[
                {name:"产品管理"}, {name:"服务管理"}, {name:"产品服务审核"}
            ]
        },
        {
            name:"订单中心",
            children:[
                {name:"业务受理"}, {name:"订单管理"}
            ]
        },
        {
            name:"优惠策略"
        }
    ];
    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#menuTree"), setting, zNodes);
    });
</script>
</body>
</html>